<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/center.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
    <script src="./js/login.js"></script>
    <script>
        let userinfo = localStorage.getItem('userinfo');
        if (!userinfo) {
            location.href = 'index.html';
        }
    </script>
</head>

<body>
    <!-- 顶部 -->
    <div class="header">
        <img class="logo-l" src="./imgs/logo.png">
        <div class="topnav">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="allCompete.html">竞赛汇总</a></li>
                <li><a href="joinTeam.html">组队</a></li>
                <li><a href="community.html">社区</a></li>
                <li><a href="jobs.html">实习求职</a></li>
                <li><a href="">优秀作品</a></li>
                <li><a href="">关于我们</a></li>
            </ul>
        </div>
        <!-- 搜索 -->
        <div class="search-box">
            <input id="top_search" type="search" placeholder="搜比赛或用户">
        </div>
        <!-- 头像 -->
        <div class="logoinbox" id="loginbox">
            <img class="logo" src="./imgs/logo.png">
            <span><a href="./login.html">登录</a></span>
        </div>
    </div>

    <!-- 主体 -->
    <div class="container">
        <!-- 头 -->
        <div class="m-head">
            <div class="touxian">
                <img class="logo" src="./imgs/logo.png">
                <span class="name">赛氪社区</span>
            </div>
            <div class="m-head-r">
                <ul>
                    <li>
                        <p>20</p>
                        <p>关注</p>
                    </li>
                    <li>
                        <p>20</p>
                        <p>粉丝</p>
                    </li>
                    <li>
                        <p>20</p>
                        <p>访客</p>
                    </li>
                </ul>
                <div class="btn-like">关注</div>
            </div>
        </div>
        <!-- 内容 -->
        <div class="m-body">
            <!-- 左 -->
            <div class="m-b-l">
                <!-- 导航 -->
                <div class="cennav">
                    <p class="on">问答</p>
                    <p>活动</p>
                    <p>文章</p>
                    <p>竞赛</p>
                    <p>订单</p>
                </div>
                <!-- 切换区 -->
                <div class="nav-contain">
                    <!-- 问答 -->
                    <div class="wrap-wenda" style="display:block">
                        <p>TA关注的问答<i>（1）</i></p>
                        <ul class="shop-list wdlist">
                            <li>
                                <p class="tit">匿名 | 想考北大金融系研究生，求推荐复习数目！谢谢！</p>
                                <div class="main">
                                    <div class="head">
                                        <img src="./imgs/logo.png">
                                        <span class="name">宋小宝</span>
                                        <span class="time">2020-1-20</span>
                                    </div>
                                    <p class="text">
                                        哈喽，我是赛赛。谈星星谈月亮谈竞赛，我在群里等你！
                                        【竞赛群】赛氪大学生英语竞赛：326057039赛氪数学建模竞赛群：423876344赛氪大学生数学竞赛：572887227赛氪大学生力学竞赛：16834313
                                    </p>
                                    <div class="foot">
                                        <div class="item">
                                            <i class="star"></i>
                                            <span>关注</span>
                                            <span>101</span>
                                        </div>
                                        <div class="item">
                                            <i class="msg"></i>
                                            <span>评论</span>
                                            <span>28</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <p class="tit">匿名 | 想考北大金融系研究生，求推荐复习数目！谢谢！</p>
                                <div class="main">
                                    <div class="head">
                                        <img src="./imgs/logo.png">
                                        <span class="name">宋小宝</span>
                                        <span class="time">2020-1-20</span>
                                    </div>
                                    <p class="text">
                                        哈喽，我是赛赛。谈星星谈月亮谈竞赛，我在群里等你！
                                        【竞赛群】赛氪大学生英语竞赛：326057039赛氪数学建模竞赛群：423876344赛氪大学生数学竞赛：572887227赛氪大学生力学竞赛：16834313
                                    </p>
                                    <div class="foot">
                                        <div class="item">
                                            <i class="star"></i>
                                            <span>关注</span>
                                            <span>101</span>
                                        </div>
                                        <div class="item">
                                            <i class="msg"></i>
                                            <span>评论</span>
                                            <span>28</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <!-- 活动 -->
                    <div class="" style="display: none;">
                        活动相关
                    </div>

                    <!-- 文章 -->
                    <div class="" style="display: none;">
                        文章相关
                    </div>
                </div>
            </div>
            <!-- 右- -->
            <div class="m-b-r">
                <p class="mdtit">相关推荐</p>
                <ul class="tj-list">
                    <li>
                        <a href="#">
                            <img class="mimg" src="./imgs/game1.jpg">
                            <div>
                                <p class="tit">设计及项目设计及项目建筑...</p>
                                <div class="czuo">
                                    <p class="item">
                                        <span>评论</span>
                                        <span>28</span>
                                    </p>
                                    <p class="item">
                                        <span>浏览</span>
                                        <span>218</span>
                                    </p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="mimg" src="./imgs/game1.jpg">
                            <div>
                                <p class="tit">设计及项目设计及项目建筑...</p>
                                <div class="czuo">
                                    <p class="item">
                                        <span>评论</span>
                                        <span>28</span>
                                    </p>
                                    <p class="item">
                                        <span>浏览</span>
                                        <span>218</span>
                                    </p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="mimg" src="./imgs/game1.jpg">
                            <div>
                                <p class="tit">设计及项目设计及项目建筑...</p>
                                <div class="czuo">
                                    <p class="item">
                                        <span>评论</span>
                                        <span>28</span>
                                    </p>
                                    <p class="item">
                                        <span>浏览</span>
                                        <span>218</span>
                                    </p>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

    </div>

    <script>
        $(function () {
            // 点击主体导航栏下方展示相应子区域
            $(".cennav>p").click(function () {
                // 获取content容器的子div，得到集合divShow
                var divShow = $(".nav-contain").children("div");
                // 利用样式进行判断
                if (!$(this).hasClass("on")) {
                    // 获取导航栏和div对应的顺序索引
                    var index = $(this).index();
                    $(this).addClass("on").siblings("p").removeClass("on");
                    $(divShow[index]).show().siblings("div").hide();
                }
            });
        })
    </script>
</body>

</html>